<template>
  <div class="unit-detail animate__animated animate__zoomIn">
    <div class="unit-detail-title">
      <dv-decoration-11 style="width: 30%; height: 50%; font-size: 0.3rem"
        >单位 综合信息</dv-decoration-11
      >
      <div class="goback">
        <GoBack></GoBack>
      </div>
      <div class="goindex">
        <GoIndex></GoIndex>
      </div>
    </div>
    <div class="unit-detail-body">
      <!-- TAB -->
      <div class="unit-tab">
        <div class="tab1">
          <!-- <router-link :to="{name:'unit-detail-tab1'}"  exact-active-class="tab-active"> -->
          <span :class="unitTab == 1 ? 'my-active' : ''" @click="changeTab(1)"
            >基本信息</span
          >
          <!-- </router-link> -->
        </div>
        <div class="tab-line">
          <span>/</span>
        </div>
        <div class="tab2">
          <!-- <router-link :to="{name:'unit-detail-tab2'}"  exact-active-class="tab-active"> -->
          <span :class="unitTab == 2 ? 'my-active' : ''" @click="changeTab(2)"
            >辅助信息</span
          >
          <!-- </router-link> -->
        </div>
      </div>
      <!-- content -->
      <div class="unit-content">
        <!-- <router-view></router-view> -->
        <div class="content-body" v-if="!loadingFlag">
          <template v-if="unitTab == 1">
            <Tab1 :tabData="tabData1"></Tab1>
          </template>
          <template v-else>
            <Tab2 :tabData="tabData2"></Tab2>
          </template>
        </div>

        <div v-if="loadingFlag" class="e-loading">
          <dv-loading style="color: #fff; opcity: 0.5"
            >设备列表数据加载中...</dv-loading
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tab1 from "../detail-tab/unit-detail-tab1";
import Tab2 from "../detail-tab/unit-detail-tab2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Tab1, Tab2 },
  data() {
    //这里存放数据
    return {
      unitTab: 1,
      loadingFlag: true,
      tabData1: {},
      tabData2: {},
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeTab(tab) {
      this.unitTab = tab;
    },

    async init() {
      this.loadingFlag = true;
      let id = this.$route.params.id;
      console.log("接收的单位ID: " + id);
      await this.getCompanyDetail(id);
    },

    async getCompanyDetail(id) {
      // tab1
      let ret1 = await this.$http.postGetComBaseInfoById({ id: parseInt(id) });
      ret1 = ret1.data;
      // console.log(ret1);
      if (ret1.errorCode != 0) {
        return console.log(ret1.errorCode + ' | ' + ret1.errorInfo);
      }
      // tab2
      let ret2 = await this.$http.postGetComAidedInfoById({ id: parseInt(id) });
      ret2 = ret2.data;
      if (ret2.errorCode != 0) {
        return console.log("数据有误2！");
      }

      // console.log('---------');
      this.tabData1 = ret1.data;
      this.tabData2 = ret2.data;

      this.loadingFlag = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.list.tb = this.list1.tb
    // this.list.th = this.list1.th
  },
  beforeRouteEnter(to,form,next) {
    if (JSON.stringify(to.params)=="{}") {
      to.meta.isBack = true
    }else{
      to.meta.isBack = false
    }
    next()
  },
  activated() {
    if (!this.$route.meta.isBack) {
      console.log('需要刷新');
      this.init()
    }else{
      console.log('缓存页面');
    }
  },
};
</script>

<style lang="less" scoped>
.unit-detail {
  width: 100%;
  height: 100%;
  .unit-detail-title {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: @FontColor;
  }
  .unit-detail-body {
    width: 100%;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
    // background-color: rgba(255,255,255,.1);
    position: relative;
    .unit-tab {
      width: 3rem;
      height: 0.5rem;
      border: 1px solid #ccc;
      position: absolute;
      right: 1%;
      top: -0.6rem;
      border-radius: 0.05rem;
      display: flex;
      .tab1,
      .tab2 {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: 0.2rem;
      }
      .tab-line {
        width: 5%;
        height: 100%;
        font-size: 0.26rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .unit-content {
      width: 100%;
      height: 100%;
      .content-body {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.tab-active {
  color: #eee;
}
</style>